<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select
          :disabled="scence == Scence.write || scence == Scence.writeSpu"
          v-model="attrStore.category1Value"
          placeholder="请选择一级分类"
          size="large"
          style="width: 240px"
          @change="getCategory2List($event)"
        >
          <el-option
            v-for="item in attrStore.category1"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          :disabled="scence == Scence.write || scence == Scence.writeSpu"
          @change="getCategory3List()"
          v-model="attrStore.category2Value"
          placeholder="请选择二级分类"
        >
          <el-option
            v-for="item in attrStore.category2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          :disabled="scence == Scence.write || scence == Scence.writeSpu"
          v-model="attrStore.category3Value"
          placeholder="请选择三级分类"
        >
          <el-option
            v-for="item in attrStore.category3"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ElOption, ElSelect } from 'element-plus'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import useAttrStore from '@/store/modules/attr'
import { Scence } from '@/views/product/attr/type'
let attrStore = useAttrStore()
defineProps(['scence'])
onMounted(() => {
  attrStore.getCategory1()
})

const getCategory2List = (e) => {
  console.log(e)
  console.log(attrStore.category1Value)

  attrStore.getCategory2()
  attrStore.clearData(1)
}
const getCategory3List = () => {
  attrStore.clearData(2)
  attrStore.getCategory3()
}

onBeforeUnmount(() => {
  attrStore.clearState()
})
</script>

<style lang="scss" scoped>
.el-select {
  min-width: 146px;
}
.el-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 150px;
}
</style>
